<template>
  <a-modal v-model:visible="visible" title="创建用户信息" :on-before-ok="confirm" width="600px">
    <a-row justify="center">
      <a-form ref="formRef" :model="form" size="medium" auto-label-width :style="{ width: 'auto' }">
        <a-form-item field="mobile" label="手机号码" :rules="rules.mobile">
          <a-input v-model="form.mobile" placeholder="请输入手机号码" style="width: 300px" />
        </a-form-item>
        <a-form-item field="nickname" label="用户昵称" :rules="rules.nickname">
          <a-input v-model="form.nickname" placeholder="请输入用户昵称" style="width: 300px" />
        </a-form-item>
        <a-form-item field="password" label="用户登录密码" style="width: 500px" :rules="rules.password">
          <a-input-password
            v-model="form.password"
            placeholder="请设置6-12位包含数字字母(大小写)特殊符号的密码"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </a-row>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Message, Modal, type FormInstance } from '@arco-design/web-vue'
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon'
import { crateUser } from '@/apis'
import * as Regexp from '@/utils/regexp'

type Form = { nickname: string; mobile: string; password: string }
const form: Form = reactive({
  nickname: '',
  mobile: '',
  password: ''
})

const rules = {
  nickname: [{ required: true, message: '请输入用户昵称' }],
  mobile: [
    { required: true, message: '请输入用户昵称' },
    { match: Regexp.Phone, message: '手机号格式不正确' }
  ],
  password: [
    { required: true, message: '请输入用户登录密码' },
    { match: Regexp.Password, message: '密码格式不正确' }
  ]
}

const visible = ref(false)
const formRef = ref<FormInstance>()

const confirm = async () => {
  const flag = await formRef.value?.validate()
  if (flag) {
    return false
  } else {
    const res = await crateUser({ ...form })
    let resData = JSON.parse(res)
    if (resData.code === 200) {
      Message.success(resData.message || '创建成功')
      visible.value = false
      form.nickname = ''
      form.password = ''
      form.mobile = ''
    } else {
      Message.error(resData.message)
      return false
    }
    // const res = await updateCustomer({
    //   customer_id: form.id,
    //   headimage: form.headimage,
    //   nickname: form.nickname,
    //   remarks: form.remarks
    // })
    // let resData = JSON.parse(res)
    // if (resData.code === 200) {
    //   Message.success('修改成功')
    //   visible.value = false
    //   form.id = ''
    //   form.password = ''
    //   form.confirm_password = ''
    //   form.headimage = ''
    //   file.value = null
    //   emits('reFreshTable')
    // } else {
    //   Message.error(resData.message)
    //   return false
    // }
  }
}

const show = (id: string) => {
  visible.value = true
}

defineExpose({ show })
</script>

<style lang="scss" scoped>
:deep(.arco-collapse-item-content) {
  background: none;
}
</style>
